<template>
  <div class="bind-row-box">
    <el-scrollbar ref="scrollMenuRef"
                  wrap-style="overflow-x:hidden;"
                  :style="{height: scrollBarHeight}"
                  class="scrollMenuBox">
      <ul>
        <li v-for="(item, index) in value"
            :key="index">
          <el-row :gutter="20"
                  class="li-row">
            <el-col :span="7">
              <span :title="item.contractNo">{{item.contractNo}}</span>
              <div class="noColor">{{ item.errorMessage }}</div>
            </el-col>
            <el-col :span="4">
              <span>{{item.trackTypeDesc}}</span>
            </el-col>
            <el-col :span="9"
                    class="flex-start">
              <span v-show="item.trackType">35160808<el-input v-model="item.deviceCode"
                          placeholder="输入编号后七位"
                          :class="{inputBorder: item.errors}"
                          class="input-code"
                          @input="handleInput(item, index)" /></span>
              <span v-show="!item.trackType">{{item.deviceCode}}</span>
            </el-col>
            <el-col v-if="item.trackType"
                    :span="2">
              <span>
                <el-button type="text"
                           @click="deleteRow(index)">删除</el-button>
              </span>
            </el-col>
          </el-row>
        </li>
      </ul>
    </el-scrollbar>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: "BatchBindRow",
  props: {
    value: {
      type: Array,
      default: () => []
    },
    scrollBarHeight: {
      type: String,
      default: "300px"
    },
    name: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      timer: null
    }
  },
  computed: {
  },
  created () {
    // console.log('defaultdefault?????', this.value)
  },
  methods: {
    handleInput: _.debounce(function (value, index) {
      this.$emit('handleInput', value, index)
    }, 300),
    deleteRow (index) {
      this.$emit('delete', index)
    }
  }
}
</script>

<style>
.bind-row-box .is-horizontal .el-scrollbar__thumb {
  display: none !important;
}
</style>
<style lang="scss" scoped>
.li-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 12px 5px;
}
.flex-start {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.input-code {
  width: 150px;
  margin-left: 5px;
}
.noColor {
  color: red;
  font-size: 12px;
  // padding-top: 2px;
}
.inputBorder {
  border: 1px solid red;
  border-radius: 5px;
}
</style>